import React, { useEffect, useState } from 'react';
import { Button, Modal, Slider } from 'antd';
import dayjs from 'dayjs';
import "../indexRoom.less"
import { getLocale, useIntl } from '@umijs/max';


interface Prpos {
    StartFlag: boolean
    setStartFlag: (event: boolean) => void
    dataSource: RoomList[]
    IfSendCard: boolean
    state: stateObj
    setsendMsg: (event: stateObj) => void
    setType: (event: string) => void
    EndTimer: string
    sendCardFlag: boolean
    setsendCardFlag: (Event: boolean) => void
    dataSourceLength: number
    setGetcardMsg: (event: object) => void
    delRoom: (id: number) => void
    Formvalue: any
    CloseAll: () => void
}

const StartIssuingCards: React.FC<Prpos> = ({ CloseAll, Formvalue, setGetcardMsg, dataSourceLength, setsendCardFlag, delRoom, sendCardFlag, EndTimer, setType, setsendMsg, state, IfSendCard, dataSource, StartFlag, setStartFlag }) => {
    const Close = () => {
        setStartFlag(false)
        CloseAll()
    }

    const intl = useIntl()

    const SendFunc = (res: RoomList) => {

        let changetimer = dayjs(EndTimer).format('YYYY-MM-DD HH:mm:ss')
        let data = {
            "cardclass": "guestcard",
            "roomid": res.roomId,
            "begintime": res.expire_time,
            "endtime": changetimer,
            "groupid": "0",
            "t1": state.T1,
            "t2": state.T2,
            "t3": state.T3,
            "t4": state.T4,
            "t5": state.T5,
            "t6": state.T6,
            "t7": state.T7,
            "t8": state.T8,
            "roomlist": "",
            "uuid": "guestcard"
        }
        setsendMsg(data)
        setType("登记入住")
    }
    const [targetKeys, setTargetKeys] = useState<any>([]);

    // 监听到父组件 上报卡号开始发卡 且进度条加一
    useEffect(() => {

        if (IfSendCard) {
            console.log(Formvalue);
            const checkInTimer = dayjs(Formvalue.checkInTimer.$d).format("YYYY-MM-DD HH:mm:ss");

            let checkOutTimer = dayjs(Formvalue.checkOutTimer.$d).format("YYYY-MM-DD HH:mm:ss");
            let data = { ...List[0], endtime: checkOutTimer, idcard: checkInTimer, isHourlyRoom: 0, phone: Formvalue.phone, username: Formvalue.checkIn, source: "登录入住" }
            setTimeout(() => {
                SendFunc(List[0])
                setValue(value + 1)
            },100)
            setGetcardMsg(data)
        }

    }, [IfSendCard]);
    // 发卡成功之后 已发卡框内数据进行加一
    const [List, setList] = useState<any>([])

    const [Length, setLength] = useState(0)
    // 
    useEffect(() => {
        console.log("加载1====>")
        setList(dataSource)

        console.log("状态", sendCardFlag)
        if (sendCardFlag) {

            setTargetKeys((prevState: any) => [...prevState, List[0]])
            setsendCardFlag(false)
        }
    }, [sendCardFlag, dataSource, dataSourceLength])

    useEffect(() => {
        setLength(dataSourceLength)
    }, [dataSourceLength])
    // 发卡进度条
    const [value, setValue] = useState(0);


    const del = (id: number) => () => {

        delRoom(id)
        let arr = List.filter((item: RoomList) => {
            return item.id !== id
        })

        handleDecrement()
        setList(arr)
        // setTargetKeys([])
        setsendCardFlag(false)

        if (arr.length === 0) {
            setStartFlag(false)
        }
    }
    const handleDecrement = () => {
        setLength(prevLength => {
            console.log("prevLength", prevLength);
            return prevLength -= 1
        });
        console.log("length", length);

    };

    return (
        <Modal
            title={intl.formatMessage({id:"business.Start issuing cards"})}
            open={StartFlag}
            onCancel={Close}
            width={600}
            footer={[
                <Button danger type='primary' onClick={() => { Close() }}>
                    {intl.formatMessage({id:"business.stop"})}
                </Button>
            ]}
        >
            {
                !IfSendCard && <p style={{ color: "red" }}>{intl.formatMessage({id:"business.Please put the room card on the card dispenser"})} !</p>
            }

            <div style={{ display: "flex" }}>
                <div className='SendCard'>
                    <h3 className='headerH3'>{intl.formatMessage({id:"business.Room card to be issued"})}<span style={{ fontSize: "12px" }}> ( {List.length} )</span>  </h3>
                    {
                        List.map((item: RoomList) => {
                            return (
                                <div
                                    key={item.id}
                                    className='ItemRoomOne'
                                >
                                    <div>{item.roomName}</div> <div className='f14 red_font' onClick={del(item.id)}>{intl.formatMessage({id:"business.Delete"})}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='SendCard'>
                    <h3 className='headerH3'>{intl.formatMessage({id:"business.Success"})} &nbsp; <span style={{ fontSize: "12px" }}> {targetKeys.length + " / " + Length}</span>  </h3>
                    {
                        targetKeys.map((item: RoomList) => {
                            return (
                                <div
                                    key={item.id}
                                    className='ItemRoomOne bgcColor'
                                >
                                    {item.roomName}
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-around" }}>
                <div className='LeftNum'><span style={{ color: "green", fontSize: "17px" }}>{targetKeys.length}</span>{" / " + Length}</div>
                <div style={{ width: "92%" }}>
                    <Slider max={Length}
                        className="custom-slider"
                        min={0} value={value}

                    />
                </div>
            </div>

        </Modal>
    )
}

const MemoizedStartIssuingCards = React.memo(StartIssuingCards);

export default MemoizedStartIssuingCards;
